<template>
  <el-container class="app-container">
    <el-collapse @change="handleCollapseChange" v-model="collapseActiveName">
      <el-collapse-item :title="collapseTitle" name="1">
        <el-tabs type="border-card">
          <el-form :model="pageInfo" ref="form" label-width="100px" size="medium">
            <el-row>
              <el-col :span="5" :offset="0">
                <el-form-item prop="groupId" label="户号:">
                  <el-input v-model.trim="pageInfo.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="0">
                <el-form-item prop="groupId" label="费用类型:">
                  <el-select v-model="pageInfo.groupId" placeholder="请选择">
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="0">
                <el-form-item prop="groupId" label="缴费状态:">
                  <el-select v-model="pageInfo.groupId" placeholder="请选择">
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="0">
                <el-form-item prop="groupId" label="租户所属空间:">
                  <el-select v-model="pageInfo.groupId" placeholder="请选择">
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="4" :offset="0" >
                <el-button type="primary" icon="el-icon-search" @click='getData'>搜索</el-button>
                <!--                  <el-button @click="resetForm">重置</el-button>-->
              </el-col>
            </el-row>
          </el-form>
        </el-tabs>
      </el-collapse-item>
    </el-collapse>
    <el-header class="m-t-20">
      <el-button type="primary" icon="el-icon-plus" @click="addOne">缴费清单</el-button>
    </el-header>

    <!--表格-->
    <table-view
      :editBtnMap="true"
      :imglist="imglist"
      :editBtnMapList="['view','update', 'delete']"
      :columns="tableContent"
      :pageList="columnData"
      @edit-btnclick="editBtnClick"
    >
    </table-view>

    <!--分页-->
    <pagination-view :pagesize="pageInfo.pageSize"
                     :currentPage="pageInfo.pageNumber"
                     :total="total"
                     @size-change="sizeChange"
                     @current-change="pageChange"
    ></pagination-view>

    <el-dialog title="创建缴费单" :visible.sync="dialogVisible" width="60%"
               :destroy-on-close="true" :before-close="handleClose">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="width: 90%">

          <el-form-item prop="areaPic" label="办公空间图片:">
            <img-upload class="form-pic" @upload-callback="handleUpload(arguments[0],{name:'areaPic'})"
                        :imageUrl="form.areaPic" uploadFrom="operation"></img-upload>
          </el-form-item>

        <el-form-item prop="num" label="楼号/楼层/房号:">
          <el-select v-model="form.groupId" placeholder="请选择所属空间">
            <el-option
              v-for="item in spaceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="form.groupId" placeholder="请选择楼号">
            <el-option
              v-for="item in spaceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="form.groupId" placeholder="请选择楼层">
            <el-option
              v-for="item in spaceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="form.groupId" placeholder="请选择房号">
            <el-option
              v-for="item in spaceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="area" label="面积（m²）:" placeholder="费用类型">
          <el-select v-model="form.groupId" placeholder="请选择">
            <el-option
              v-for="item in spaceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="productName" label="上期日期:" class="fl" style="width: 50%">
          <el-date-picker
            v-model="form.date"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="memo" label="上期数值:" class="fl" style="width: 50%">
          <el-input v-model.trim="form.memo" style="width: 50%"></el-input>
        </el-form-item>

        <el-form-item prop="productName" label="当期日期:" class="fl" style="width: 50%">
          <el-date-picker
            v-model="form.date"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="memo" label="本期数值:" class="fl" style="width: 50%">
          <el-input v-model.trim="form.memo" style="width: 50%"></el-input>
        </el-form-item>

        <el-form-item prop="memo" label="费用小计（元）:">
          <el-input v-model.trim="form.memo" style="width: 50%"></el-input>
        </el-form-item>

        <el-form-item prop="memo" label="备注:">
          <el-input v-model.trim="form.memo" type="textarea" style="width: 60%"></el-input>
        </el-form-item>

        <el-form-item prop="productName" label="招商状态:">
          <el-radio-group v-model="form.radio2">
            <el-radio :label="1">未缴费</el-radio>
            <el-radio :label="2">已缴费</el-radio>
            <el-radio :label="3">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>



    <el-dialog title="订单详情" :visible.sync="dialogView" width="80%"
               :destroy-on-close="true" :before-close="handleClose">
      <el-row>
        <el-col :span="10">
          <p>单号:  {{form.aaa}}</p>
          <p>缴费单图片:  {{form.aaa}}</p>
          <p>户号:  {{form.aaa}}</p>
          <p>租户名称:  {{form.aaa}}</p>
          <p>所属空间:  {{form.aaa}}</p>
          <p>费用类型:  {{form.aaa}}</p>
          <p>上期日期:  {{form.aaa}}</p>
          <p>上期数值:  {{form.aaa}}</p>
          <p>当期日期:  {{form.aaa}}</p>
          <p>当期数值:  {{form.aaa}}</p>
          <p>订单金额:  {{form.aaa}}</p>
          <p>优惠抵扣:  {{form.aaa}}</p>
          <p>实付金额:  {{form.aaa}}</p>
        </el-col>
        <el-col :span="10">
          <p>订单创建用户:  {{form.aaa}}</p>
          <p>订单创建时间:  {{form.aaa}}</p>
          <p>缴费状态:  {{form.aaa}}</p>
          <p>支付状态:  {{form.aaa}}</p>
          <p>付款方式:  {{form.aaa}}</p>
          <p>付款渠道:  {{form.aaa}}</p>
          <p>付款时间:  {{form.aaa}}</p>
          <p>支付流水号:  {{form.aaa}}</p>
          <p>退款时间:  {{form.aaa}}</p>
          <p>退款方式:  {{form.aaa}}</p>
          <p>退款金额:  {{form.aaa}}</p>
          <p>备注:  {{form.aaa}}</p>
        </el-col>
      </el-row>
    </el-dialog>

    <el-footer></el-footer>
  </el-container>
</template>

<script>
  import TableView from '@/components/TableView'
  import ImgUpload from '@/components/ImgUpload'

  import PaginationView from '@/components/PaginationView'
  // import pageApi from '@/api/operation/productSetting'

  export default {
    name: 'list',
    components: {
      TableView,
      PaginationView,
      ImgUpload
    },
    data() {
      return {
        imglist:{},
        spaceOptions:[],
        statusOptions:[{label:'全部',value:''},{label:'正常',value:'1'},{label:'关闭',value:'0'}],
        dialogVisible:false,
        dialogView:false,
        tableContent:[{
          field: 'productName',
          label: '缴费单图片'
        }, {
          field: 'productName',
          label: '费用类型'
        }, {
          field: 'productName',
          label: '户号'
        }, {
          field: 'productName',
          label: '上期日期'
        }, {
          field: 'productName',
          label: '上期数值'
        }, {
          field: 'productName',
          label: '本期日期'
        }, {
          field: 'productName',
          label: '本期数值'
        }, {
          field: 'productName',
          label: '费用小计'
        }, {
          field: 'productName',
          label: '所属空间'
        },{
          field: 'productName',
          label: '缴费状态'
        },{
          field: 'productName',
          label: '备注'
        }],
        columnData: [{}, {}],
        customWidth: '',
        pageInfo: {
          pageNum: 1,
          pageSize: 20,
          title: ''
        },
        total: 0,
        form: {
          costAmount: '',
          intro: '',
          memo: '',
          title: '',
          addressDetail: '',
          addressName: '',
          saleAmount: '',
          sort: ''
        },
        rules: {
          productName: [
            {required: true, trigger: 'blur', message: '名称不能为空'},
            {min: 1, max: 14, message: '长度不能超过14个汉字'}
          ],
          intro: [
            {required: true, trigger: 'blur', message: '简介不能为空'},
            {min: 1, max: 20, message: '长度不能超过20个汉字'}
          ],
          durationTime: [{required: true, trigger: 'change', message: '请选择套餐时长'}],
          sort: [{required: true, trigger: 'blur', message: '请填写排序'}],
          enable: [{required: true, trigger: 'change', message: '请选择套餐状态'}],
          tag: [{min: 1, max: 4, trigger: 'blur', message: '长度不能超过4个汉字'}],
        }
      }
    },
    watch: {},
    methods: {

      addOne() {
        this.dialogVisible = true
      },

      changeUserStatus: function (id, enable) {
        pageApi.changeEnable(id, enable).then((res) => {
          this.handleMessage(res)
          if (res.code === '200') this.getData()
        })
      },
      onSubmit() {
        let form = this.form
        let dialogType = this.dialogType
        form.duration = form.durationTime + (form.productTypeId == 1 ? '个月' : '天')
        form.enable = Number(form.enable)
        this.$refs['form'].validate((valid) => {
          if (valid) {
            switch (dialogType) {
              case 'add':
                pageApi.create(form).then(res => {
                  this.handleRes(res)
                })
                break
              case 'update':
                pageApi.update(form).then(res => {
                  this.handleRes(res)
                })
                break

            }
          }
        })
      },
      handleRes(res) {
        this.handleMessage(res)
        if (res.code === '200') {
          this.dialogVisible = false
          this.getData()
        }
      },
      // pageSize变化函数
      sizeChange(val) {
        this.pageInfo.pageSize = val
        this.getData()
      },
      // page变化函数
      pageChange(val) {
        this.pageInfo.pageNumber = val
        this.getData()
      },
      editBtnClick(val,index, type) {
        switch (type) {
          case 'update':
            pageApi.getById(val.courseProductId).then(res => {
              this.form = Object.assign({}, this.form, res.body)
            })
            this.dialogType = type
            this.dialogVisible = true
            break
          case 'view':
            debugger
            this.dialogView = true
            pageApi.getById(val.courseProductId).then(res => {
              this.form = Object.assign({}, this.form, res.body)
            })

            break
          case 'delete':
            this.changeUserStatus(val.courseProductId, val.enable ? 0 : 1)
            break
        }
      },
      //拉取列表
      getData() {
        pageApi.getList(this.pageInfo).then(res => {
          this.columnData = res.body.records
          this.total = Number(res.body.total)
          this.pageInfo.pageNumber = Number(res.body.pageNumber) || 1
        })
      },
      handleClose(done) {
        let resetForm = {
          costAmount: '',
          courseProductId: '',
          duration: '',
          durationTime: '',
          enable: true,
          intro: '',
          memo: '',
          productName: '',
          saleAmount: '',
          sort: '',
          tag: ''
        }
        this.form = Object.assign({}, this.form, resetForm)
        done()
      }

    },
    mounted() {
      this.getData()
    }
  }
</script>

<style lang="scss" scoped>

</style>
